﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon/favicon.ico" />
    <title> Mars3D最简项目模版 - ES5传统版</title>


    <!--参考教程：http://mars3d.cn/dev/guide/basics/download.html -->

    <!--引入cesium基础lib-->
    <link href="libs/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
    <script src="libs/Cesium/Cesium.js" type="text/javascript"></script>
    <script src="libs/turf/turf.min.js" type="text/javascript"></script>

    <!--引入mars3d库lib-->
    <link href="libs/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
    <script src="libs/mars3d/mars3d.js" type="text/javascript"></script>

    <!--引入mars3d库插件lib（按需引入）-->
    <script src="libs/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script>

    <!--第三方lib，非必须-->
    <!-- <link rel="stylesheet" href="http://mars3d.cn/lib/fonts/font-awesome/css/font-awesome.min.css"> -->
    <script type="text/javascript" src="libs/hao/haoutil.js"></script>

    <link href="css/style.css" rel="stylesheet" />
    <link href="css/divGraphic.css" rel="stylesheet" />
    <link href="css/divGraphicCustom.css" rel="stylesheet" />

    <script src="libs/jquery/jquery-1.9.1.js"></script>
    <script src="libs/dayjs/dayjs.min.js"></script>
    <link href="libs/layer/theme/default/layer.css" rel="stylesheet" type="text/css" />
    <link href="libs/layer/theme/retina/retina.css" rel="stylesheet" type="text/css" />
    <link href="libs/layer/theme/mars/layer.css" rel="stylesheet" type="text/css" />
    <script src="libs/layer/layer.js" type="text/javascript"></script>
    <script src="libs/tween/tween.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="mars3dContainer" class="mars3d-container"></div>
    <div
        style="position:absolute; left:80px; top:20px; background-color:transparent; width:1200px; height:30px; z-index:99998; border:solid 1px transparent;">
        <input type="button" onclick="switch2D3D()" value="切换到二维" id="switch2D3D" />
        <input type="button" onclick="showView()" value="输出当前视角" />
        <input type="button" onclick="flyToView1()" value="默认视角" />
        <input type="button" onclick="flyToView2()" value="守方视角" />
        <input type="button" onclick="flyToView3()" value="攻方视角" />
        <input type="button" onclick="startTask1()" value="开始演示任务1" />
        <input type="button" onclick="startTask2()" value="开始演示任务2" />
        <input type="button" onclick="appendData()" value="追加数据" />
        <input type="button" onclick="runTween()" value="Tween动画" />
    </div>

    <!--业务代码-->
    <script src="js/utils.js"></script>
    <script src="js/Explosion.js"></script>
    <script src="js/Label.js"></script>
    <script src="js/SceneClock.js"></script>
    <script src="js/DroneTrack.js"></script>
    <script src="js/AttackDrones.js"></script>
    <script src="js/InterferenceDrones.js"></script>
    <script src="js/ShootDown.js"></script>
    <script src="js/DriveAway.js"></script>
    <script src="js/DroneSwarm.js"></script>
    <script src="js/Vehicle.js"></script>
    <script src="js/DetectsDrones.js"></script>
    <script src="js/tasks.js"></script>
    <script src="js/AircraftTakeoffDemo.js"></script>
    <script src="js/index.js"></script>

    <script type="text/javascript">
        // 二三维切换
        function switch2D3D() {
            if (!map) return;
            let switchControl = $('#switch2D3D');
            if (switchControl.val() == '切换到二维') {
                map.setCameraView({
                    lat: 31.8187,
                    lng: 117.1808,
                    alt: 10000
                }, {
                    complete: () => {
                        map.scene.mode = Cesium.SceneMode.SCENE2D;
                    }
                });
                switchControl.val('切换到三维')
            } else {
                map.scene.mode = Cesium.SceneMode.SCENE3D;
                map.setCameraView({
                    lat: 31.686288,
                    lng: 117.229619,
                    alt: 11333.9,
                    heading: 359.2,
                    pitch: -39.5
                });
                switchControl.val('切换到二维')
            }
        }

        // 输出当前视角
        function showView() {
            let view = map.getCameraView();
            console.info('当前视角', view);
        }

        // 默认视角
        function flyToView1() {
            map.trackedEntity = undefined;
            map.setCameraView({
                lat: 31.77873,
                lng: 117.159108,
                alt: 3146.7,
                heading: 29.4,
                pitch: -28.9
            });
        }

        // 守方视角
        function flyToView2() {
            map.trackedEntity = undefined;
            map.setCameraView(window.detectsDrones.defendView);
        }

        // 攻方视角
        function flyToView3() {
            // map.setCameraView(window.detectsDrones.attackView);
            taskArray.map(detectsDronesTask => {
                if (detectsDronesTask.moving) {
                    map.trackedEntity = detectsDronesTask.droneSwarm.graphic;
                } else {
                    map.trackedEntity = undefined;
                }
            });
        }

        // 开始演示任务1
        function startTask1() {
            // window.detectsDrones.showEllipsoidEntity(2);
            let sceneClock = window.sceneClock = new SceneClock({
                map: map,
            });
            window.sceneClock.startAnimate();

            runTask1(true);
        }

        // 开始演示任务2
        function startTask2() {
            // window.detectsDrones.showEllipsoidEntity(2);
            let sceneClock = window.sceneClock = new SceneClock({
                map: map,
            });
            window.sceneClock.startAnimate();

            runTask2();
        }

        // Tween动画
        function runTween() {
            window.detectsDrones && window.detectsDrones.moveVehicle3();
        }

        // Tween事件循环
        let render = function () {
            requestAnimationFrame(render);
            TWEEN.update();
        };
        render();

        // 模拟追加数据
        function appendData() {
            if (window.detectsDrones.attackDrones) {
                window.detectsDrones.attackDrones.appendData({
                    time: '2024-01-22 12:00:60.000',
                    heading: 45,
                    pitch: 60
                });
            } else if (window.detectsDrones.interferenceDrones) {
                window.detectsDrones.interferenceDrones.appendData({
                    time: '2024-01-22 12:00:60.000',
                    heading: -90,
                    pitch: 60
                });
            }
        }
    </script>
</body>

</html>